<!-- Template 代码和 Vue 2 一样 -->
<template>
  <el-button ref="buttonRef" v-click-outside="onClickOutside">
    <el-icon><Filter />qqq</el-icon>
  </el-button>

  <el-popover
      ref="popoverRef"
      :virtual-ref="buttonRef"
      trigger="click"
      title="With title"
      virtual-triggering
  >
    <span> Some content </span>
  </el-popover>
</template>

<!-- Script 代码需要使用 Vue 3 的新写法-->
<script lang="tsx" name="TSearchString">
    // Vue 3 的 API 需要导入才能使用
    import { defineComponent, ref, unref } from 'vue'
    import { ClickOutside as vClickOutside } from 'element-plus'
    // 使用 `defineComponent` 包裹组件代码
    // 即可获得完善的 TypeScript 类型推导支持
    export default defineComponent({
        setup() {
          const buttonRef = ref()
          const popoverRef = ref()
          const onClickOutside = () => {
            unref(popoverRef).popperRef?.delayHide?.()
          }

            // 将需要在 `<template />` 里使用的变量 `return` 出去
            return {
              onClickOutside,
            }
        },
    })
</script>

<!-- CSS 代码和 Vue 2 一样 -->
<style scoped>
    .msg {
        font-size: 14px;
    }
</style>
